<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/scanTransf.js"></script>
    <script type="text/javascript" src="../script/moment.js"></script>
    <style type="text/css">
        #app {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .scanBtn {
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            background-color: #0396FF;
            border-radius: 50%;
        }

        .scan {
            color: #fff;
            text-align: center;
            font-size: 35px;
            font-weight: bold;
        }

        .popup {
            width: 90%;
            height: 70%;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: auto;
        }

        .form-label {
            color: #808991;
            font-size: 13px;
            user-select: none;
        }

        .pictitle {
            font-size: 14px;
            color: #646566;
            width: 6em;
        }

        .piccontent {
            width: 70%;
            margin: -20px auto auto 80px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-left: 5px;
        }

        .van-uploader__upload {
            margin-left: 5px;
        }

        .savebtn {
            width: 40%;
            font-weight: bold;
            margin-bottom: 20px;
            top: 50px;
            left: 30%;
            transform: translate(0%, -50%);
            line-height: 80px;
            /* margin-top: 0px; */
        }

        .part {
            padding: 15px 15px 0 15px;
        }

        .part .pf {
            border-radius: 6px;
            box-shadow: 0px 1px 5px rgb(200, 198, 198);
            background-color: #fff;
            overflow: hidden;
            padding: 4px 0;
        }

        .textarea {
            display: block;
        }

        .label {
            padding: 10px 16px;
            width: 100%;
        }

        .ap-f {
            border-bottom: 1px solid #f7f7f7;
        }

        .f-r {
            /* padding: 17px 0; */
        }

        .mark {
            padding: 17px 15px;
        }

        .mark1 {
            padding: 17px 5px 17px 15px;
            position: relative;
        }

        .f-sub {
            color: #969799;
            font-size: 13px;
            margin-top: 4px;
        }

        .line {
            position: relative;
            width: 30px;
        }

        .line1 {
            width: 60px;
        }

        .line-sq {
            display: inline-block;
            width: 11px;
            height: 11px;
            border-radius: 6px;
            background: #d6d6d6;
            position: absolute;
            left: 0;
            top: 12px;
        }

        .line-li {
            display: inline-block;
            width: 1px;
            background: #d6d6d6;
            position: absolute;
            left: 5px;
            top: -17px;
            bottom: -17px;
        }

        .line-li1 {
            display: inline-block;
            background: #d6d6d6;
            position: absolute;
            top: 52px;
            left: 35px;
            width: 3px;
            bottom: 10px;
        }

        .pd {
            padding: 16px 0;
        }

        .ap-r {
            text-align: right;
            padding-right: 10px;
            /* margin: -8px 0; */
            padding-top: 10px;
        }

        .ap-d {
            text-align: right;
            padding-right: 10px;
            color: #ccccce;
            font-size: 13px;
            float: right;
            padding-top: 3px;
        }

        .img {
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            background-color: #3396fb;
            border-radius: 6px;
            margin: 0 auto;
            position: relative;
            user-select: none;
        }

        .img1 {
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 13px;
            color: #fff;
            background-color: #3396fb;
            border-radius: 6px;
            position: relative;
            user-select: none;
        }

        .dis-ib {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            min-width: 40px;
        }

        .dis2-ib {
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 3px;
            text-align: center;
        }

        .dis3-ib {
            display: inline-block;
            margin: 0 6px;
            color: #969799;
            vertical-align: top;
            padding-top: 7px;
            text-align: center;
        }

        .ap-n {
            padding-top: 2px;
            font-size: 13px;
            color: #969799;
            text-align: center;
        }

        .bottom {
            padding: 8px 15px;
        }

        .part-white {
            padding: 15px;
            background-color: #fff;
            position: relative;
        }

        .title {
            line-height: 40px;
            font-size: 18px;
        }

        .title-sub {
            color: #aaacac;
            font-size: 13px;
        }

        .title-read {
            color: #3396fb;
            font-size: 13px;

        }

        .title-unread {
            color: #788a8a;
            font-size: 13px;
        }

        .ap-res {
            color: #a3a3a3;
            font-size: 15px;
            padding-top: 6px;
        }

        .ap-res1 {
            color: #c31616;
            font-size: 15px;
            padding-top: 6px;
        }

        .ap-img {
            position: absolute;
            right: 20px;
            bottom: -38px;
            width: 88px;
            opacity: 0.4;
        }

        .form-row {
            padding: 4px 16px;
        }

        .form-label {
            color: #808991;
            font-size: 13px;
            user-select: none;
        }

        .color-no {
            color: #808991;
        }

        .form-content {
            padding-top: 5px;
        }

        .npd {
            padding-top: 0;
            overflow-x: auto;
        }

        .pl {
            color: #969799;
            font-size: 16px;
            margin: 6px 2px 18px 0;
            min-height: 25px;
            border-bottom: 1px solid #ebedf0;
        }

        .sf {
            width: 16px;
            background: #fff;
            padding: 2px;
            border-radius: 8px;
            position: absolute;
            right: -5px;
            bottom: -2px;
        }

        .select {
            color: #3396fb;
            float: right;
            font-size: 13px;
            padding-top: 3px;
            vertical-align: middle;
        }

        .select a {
            vertical-align: middle;
        }

        .select img {
            width: 16px;
            vertical-align: middle;
        }

        .hq {
            padding: 10px 10px 0 0;
        }

        .wh {

            white-space: nowrap;
            overflow-x: auto;
            padding-right: 10px;
        }

        .plpd {
            padding-bottom: 5px;
        }

        .pictitle {
            line-height: 24px;
            color: #646566;
            user-select: none;
        }

        .piccontent {
            padding-top: 10px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-right: 15px;
        }

        .no {
            text-align: center;
            color: #808991;
            font-size: 14px;
        }

        .li1 {
            top: 15px;
        }

        .li2 {
            bottom: 24px;
        }

        .da-c {
            color: #c31616;
        }

        .danger .van-field__control {
            color: #c31616;
        }

        .danger .van-field__label {
            color: #808991;
        }

        .ac-1 {
            color: #03b553;
        }

        .ac-2 {
            color: #c31616;
        }

        .checkbox {
            padding: 25px 5px 10px 10px;
        }

        .jl-remark {
            padding: 5px 0;
            color: #3396fb;
        }

        .memo-l {
            border-bottom: 1px solid rgb(235, 237, 240);
            padding: 4px 0;
        }

        .memo-l:last-child {
            border-bottom: 0;
        }

        .qd-title {
            font-size: 17px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            padding-right: 10px;
        }

        .date {
            float: right;
            font-size: 12px;
            color: #cbcbcb;
        }

        .sub {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            font-size: 14px;
            color: #a3a3a3;
        }

        .creater {
            font-size: 14px;
        }

        .sq {
            display: inline-block;
            font-size: 13px;
            margin: 2px 8px 0 0;
            margin-right: 8px;
            min-width: 16px;
            height: 18px;
            line-height: 18px;
            border-radius: 4px;
            text-align: center;
            background-color: #3396fb;
            color: #ffffff;
        }

        .qd-title span {
            vertical-align: middle;
        }

        .fc-1 {
            color: #3396fb;
            font-weight: 700;
        }

        .fc-2 {
            color: #ee0a24;
            font-weight: 700;
        }

        .arrow {
            padding: 4px 0;
        }

        .arrowup {
            padding: 8px 0;
            color: #3396fb;
            text-align: center;
            font-size: 14px;
        }

        .label .squ {
            background: #3775ff;
            width: 5px;
            height: 16px;
            display: inline-block;
            border-radius: 2px;
            margin-top: 5px;
            margin-right: 8px;
        }

        .chart {
            width: 100%;
            height: 200px;
            background-color: #f7f8fa;
            border-radius: 8px;
        }


        .van-tabs {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 0;
            background: #fff;
            z-index: 99;
            transition: all 0.4s;
            opacity: 0;

        }

        .van-tabs__wrap {
            padding-bottom: 5px;
        }

        .bg {
            height: 44px;
            opacity: 1;
        }

        .total-num {
            width: 60px;
            text-align: right;
        }

        .sq-1 {
            color: #3775ff;
        }

        .bg-t {
            color: #3396fb;
        }
        .mj{
            font-size: 14px;
            padding-left:10px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar-main title="模具查询" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="scan" size="18" @click="scan" />
            </template>
        </van-nav-bar-main>
        <div class="content" style="padding-bottom: 20px;">
            <div class="content-refresh">
                <div>
                    <div class="part">
                        <div class="pf">
                            <div class="form-row">
                                <div class="form-label">模具编码</div>
                                <div class="form-content">{{ MJData.MouldNo }}</div>
                            </div>
                            <div class="form-row">
                                <div class="form-label">穴数</div>
                                <div class="form-content">{{ MJData.XS }}</div>
                            </div>
                            <div class="form-row">
                                <div class="form-label">尺寸</div>
                                <div class="form-content">{{ MJData.Size }}</div>
                            </div>
                            <div class="form-row">
                                <div class="form-label">机台</div>
                                <div class="form-content">{{ MJData.Device }}</div>
                            </div>
                            <div class="form-row">
                                <div class="form-label">模架位置</div>
                                <div class="form-content">{{ MJData.Location }}</div>
                            </div>
                            <div class="form-row">
                                <div class="form-label">备注</div>
                                <div class="form-content">{{ MJData.FRemarks }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="part">
                        <div class="pf mj">
                            <van-row justify="center">
                                <van-col span="8">产品图片</van-col>
                                <van-col span="8">产品名称</van-col>
                                <van-col span="8">产品重量</van-col>
                            </van-row>
                            <van-row justify="center" v-for="item in productList">
                                <van-col span="8">
                                    <van-uploader v-model="item.pic" :show-upload="false" :deletable="false" />
                                </van-col>
                                <van-col span="8">
                                    {{ item.ProductName  }}
                                </van-col>
                                <van-col span="8">
                                    {{ item.ProductWeight  }}
                                </van-col>
                            </van-row>
                        </div>
                        

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var FNScanner = api.require('FNScanner');

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            if (!isOpenImg) {
                vm.onClickLeft();
            } else {
                photoBrowser.close();
            }

        });

        vm = new Vue({
            el: '#app',
            data: {
                FBCount: '',
                matter: '',
                status: api.pageParam.status,
                image1: [],
                serverIP: 'http://' + APP.serverIP(),
                showend: false,
                showbegin: false,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentBeginDate: new Date(),
                currentEndDate: new Date(),
                showProcess: false,
                show: false,
                process: '',
                TrialID: 0,
                BillNo: 0,
                ApplyDate: '',
                EmplName: '',
                ProductName: '',
                begintime: '',
                endtime: ' ',
                fremarks: '',
                procedureActions: [],
                MJData:{},
                productList:[]
            },
            watch: {
            },
            methods: {
                scan: function () {
                    FNScanner.open({
                        autorotation: true
                    }, function (ret, err) {
                        // alert(ret.eventType)
                        if (ret) {
                            // console.log(JSON.stringify(ret))
                            // console.log(ret.eventType == 'success')
                            if (ret.eventType == 'success') {
                                if (ret.content) {
                                    // alert(ret.content)
                                    var res = ret.content
                                    var result = res.split('|');
                                    if (result.length > 1) {
                                        vm.MJData = {};
                                        APP.ajax('getMJList', { MouldID:result[1] }, function (res) {
                                            if (res.ds.length) {
                                                // console.log(JSON.stringify(res.ds))
                                                vm.MJData = res.ds[0];
                                                for(var i=0;i<res.ds1.length;i++){
                                                    res.ds1[i].pic = [];
                                                    
                                                    res.ds1[i].pic.push({
                                                        url: vm.serverIP+res.ds1[i].FilePath,
                                                        deletable: false
                                                    });
                                                }
                                                vm.productList = res.ds1;
                                                vm.$forceUpdate();
                                            }
                                        })
                                    }
                                    // console.log(JSON.stringify(vm.TrialID))
                                    // console.log(JSON.stringify(vm.process))

                                }
                            } else {
                                layer.open({
                                    content: '图片模糊，建议截屏!',
                                    skin: 'msg',
                                    time: 2
                                })
                            }
                        } else {
                            layer.open({
                                content: '扫描失败!',
                                skin: 'msg',
                                time: 2
                            })
                        }
                    });
                },
                onClickLeft: function () {
                    api.sendEvent({
                        name: 'refreshList'
                    })
                    api.closeWin();
                }
            }
        })
    }
</script>

</html>